<template>
  <div class="component-container">
    <div class="component-container_main">
      <el-form
        :model="goodsInfo"
        label-width="auto"
        style="max-width: 600px"
        :rules="rules"
        ref="dataFormRef"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="goodsInfo.name" />
        </el-form-item>
        <el-form-item label="商品品牌" prop="brandId">
          <el-select v-model="goodsInfo.brandId" placeholder="请选择">
            <el-option
              v-for="item in brandOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="零售价" prop="originPrice">
          <el-input v-model="goodsInfo.originPrice" />
        </el-form-item>
        <el-form-item label="促销价" prop="price">
          <el-input v-model="goodsInfo.price" />
        </el-form-item>
        <el-form-item label="商品主图" prop="picUrl">
          <SingleUpload v-model="goodsInfo.picUrl" />
        </el-form-item>
        <!-- <el-form-item label="商品轮播图">
          <el-input
            v-model="goodsInfo.description"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6 }"
          />
        </el-form-item> -->
        <el-form-item label="商品详情" prop="detail">
          <WangEditor v-model="goodsInfo.detail" style="height: 600px" />
        </el-form-item>
      </el-form>
    </div>
    <div class="component-container__footer">
      <el-button @click="handlePrev">上一步，选择商品分类</el-button>
      <el-button type="primary" @click="handleNext">下一步，设置商品属性</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getBrandList } from '@/api/pms/brand'
const emit = defineEmits(['next', 'prev', 'update:modelValue'])
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  }
})
const dataFormRef = ref(ElForm)
const goodsInfo: any = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
  }
})
const state = reactive({
  brandOptions: [] as Array<any>,
  rules: {
    name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
    originPrice: [{ required: true, message: '请填写零售价', trigger: 'blur' }],
    price: [{ required: true, message: '请填写促销价', trigger: 'blur' }],
    brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
    picUrl: [{ required: true, message: '请上传商品主图', trigger: 'blur' }]
  }
})
const { brandOptions, rules } = toRefs(state)

const getBrandData = () => {
  getBrandList().then(({ data }) => {
    // console.log(data)

    state.brandOptions = data
  })
}
const handlePrev = () => {
  emit('prev')
}
const handleNext = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      emit('next')
    }
  })
}
onMounted(() => {
  getBrandData()
})
</script>

<style scoped>
</style>